<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item
					label="结算周期:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd"
						type="daterange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<!-- 关联订单 -->
				<el-form-item
					:label="`${$t(
						'funds.proxy_member_funds_record.relation_order_no'
					)}:`"
					class="flex-row-container"
					label-width="90px"
				>
					<el-input
						v-model.trim="queryData.orderNo"
						clearable
						v-symbols
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-input
						:placeholder="$t('common.please_enter')"
						clearable
						v-symbols
						size="medium"
						class="input-with-select"
						v-model.trim="queryData.searchName"
					>
						<el-select
							slot="prepend"
							v-model="queryData.accountType"
							:placeholder="$t('common.please_choose')"
						>
							<el-option label="代理账号" :value="1"></el-option>
							<el-option label="直属上级" :value="2"></el-option>
							<el-option label="所属总代" :value="3"></el-option>
						</el-select>
					</el-input>
				</el-form-item>

				<!-- 业务模式 -->
				<el-form-item
					:label="`${$t('common.business_model')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<business-model-selector
						v-model="queryData.businessModel"
						:value="queryData.businessModel"
					/>
				</el-form-item>

				<!-- 业务类型 -->
				<el-form-item
					label="业务类型"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.businessType"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="item in changeStatusList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:disabled="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90780047')"
						icon="el-icon-download"
						type="warning"
						:disabled="loading"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="tables"
				v-loading="loading"
				border
				size="mini"
				show-summary
				:data="tableData"
				style="width: 100%"
				class="small-size-table"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				element-loading-spinner="el-icon-loading"
				highlight-current-row
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
			>
				<el-table-column
					prop="orderNo"
					align="center"
					min-width="280"
					label="关联订单号"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.orderNo || '-' }}
					</template>
				</el-table-column>
				<!-- 结算周期 -->
				<el-table-column
					prop="reportDate"
					align="center"
					min-width="180"
					label="结算周期"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.reportDate || '-' }}
					</template>
				</el-table-column>
				<!-- 代理账号 -->
				<el-table-column
					prop="proxyName"
					align="center"
					min-width="180"
					label="代理账号"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 所属商户 -->
				<el-table-column
					prop="merchantName"
					align="center"
					min-width="180"
					label="所属商户"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<!-- 代理层级 -->
				<el-table-column
					align="center"
					label="代理层级"
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.proxyLevel }}/{{
							scope.row.proxyLevelName
						}}
					</template>
				</el-table-column>
				<!-- 直属上级 -->
				<el-table-column
					align="center"
					label="直属上级"
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 所属总代 -->
				<el-table-column
					align="center"
					label="所属总代"
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 业务模式 -->
				<el-table-column
					prop="businessModel"
					align="center"
					label="业务模式"
					min-width="150"
				>
					<template slot-scope="scope">
						{{
							mappingBusinessModel(scope.row.businessModel) || '-'
						}}
					</template>
				</el-table-column>
				<!-- 重算业务类型 -->
				<el-table-column
					align="center"
					label="重算业务类型"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ changeMapStatus[scope.row.changeStatus] || '-' }}
					</template>
				</el-table-column>
				<!-- 应发个人返点调整 -->
				<el-table-column
					align="center"
					label="应发个人返点调整"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.rebateAmountRecal
							)
						}}
					</template>
				</el-table-column>
				<!-- 实发个人返点调整 -->
				<el-table-column
					align="center"
					label="实发个人返点调整"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.amount)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.rebateAmountRealRecal
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					:label="$t('common.actions')"
					width="140px"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							type="text"
							size="medium"
							class="underline"
							@click="handleDetail(scope.row)"
						>
							查看详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>

		<Detail
			v-model="showDetail"
			v-if="showDetail"
			:rowData="rowData"
			:changeMapStatus="changeMapStatus"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
import BusinessModelSelector from '@/components/Form/BusinessModelSelector.vue'
import Detail from './components/detail/index.vue'
const end = () => {
  return dayjs().endOf('day')
}
const start = () => {
  return dayjs().startOf('day')
}

export default {
  name: routerNames.proxyAccountChangeRecord,
  components: {
    MainContent,
    Detail,
    BusinessModelSelector
  },
  mixins: [list, summaryList],
  data() {
    return {
      showDetail: false,
      tableHeight: 480,
      otherDependenComponents: [],
      searchTime: [start(), end()],
      queryData: {
        merchantId: '',
        orderNo: '',
        accountType: 1,
        searchName: '',
        businessModel: '',
        businessType: ''
      },
      tableData: [],
      subSummary: {},
      totalSummary: {},
      exportBtnLoading: false,
      rowData: {},
      changeStatusList: [
        {
          label: '划单返点调整',
          value: 2
        },
        {
          label: '二次结算返点调整',
          value: 1
        }
      ],
      changeMapStatus: {
        1: '二次结算返点调整',
        2: '划单返点调整'
      }
    }
  },
  watch: {},
  mounted() { },

  methods: {
    handleDetail(val) {
      this.rowData = val
      this.showDetail = true
    },
    loadData() {
      this.loading = true
      const params = this.getParams({
        ...this.queryData,
        startDate: Number(dayjs(this.searchTime[0]).format('YYYYMMDD')),
        endDate: Number(dayjs(this.searchTime[1]).format('YYYYMMDD'))
      })

      this.$api
        .proxyRebateRecallSelectReBateRecord(params)
        .then((res) => {
          const { record, totalRecord, summary } = res.data || {}
          this.tableData = record || []
          this.total = totalRecord || 0
          this.subSummary = summary || {}
        })
        .finally(() => {
          this.loading = false
        })
      this.$api
        .proxyRebateRecallReBateRecordSummary(params)
        .then((res) => {
          this.totalSummary = res?.data || {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.pageNum = 1
      this.queryData = {
        merchantId: '',
        orderNo: '',
        accountType: 1,
        searchName: '',
        businessModel: '',
        businessType: ''
      }
      this.searchTime = [start(), end()]
      this.loadData()
    },
    handleExportExcel() {
      const params = this.getParams({
        ...this.queryData,
        startDate: Number(dayjs(this.searchTime[0]).format('YYYYMMDD')),
        endDate: Number(dayjs(this.searchTime[1]).format('YYYYMMDD'))
      })
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'proxyRebateRecallProxyReBateRecordDownload',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .el-select .el-input {
	width: 130px;
}
::v-deep .input-with-select .el-input-group__prepend {
	background-color: #fff;
}
.underline {
	text-decoration: underline;
	cursor: pointer;
}
</style>
